<template>
	<view class="body">
		<view class="gap">
			<view class="content">
				<view class="head flex-all-center">
					<image class="userAvatar" :src="userInfo.avatar?userInfo.avatar:'@/static/images/userAvatar.png'" mode=""></image>
				</view>
				<view class="flex-column-center">
					<text class="vip" v-if="userInfo.platformLevelDo">{{userInfo.platformLevelDo.levelName}}</text>
					<view class="name" :style="{marginTop:userInfo.platformLevelDo?'30rpx':'112rpx'}" :class="userInfo.platformLevelDo?'':'positionDown'">{{userInfo.nickname}}</view>
					<view class="flex phoneBox">
						<image class="phoneIcon" src="@/static/images/phone.png" mode=""></image>
						<view class="text">{{userInfo.phone.substr(0,3) + "****" + userInfo.phone.substr(7)}}</view>
					</view>
					<view class="codeBox">
						<image class="qrImg" :src="qrImg" mode=""></image>
					</view>
					<view class="tip flex">
						<image class="codeIcon"
							src="https://store-profit-system.oss-cn-shanghai.aliyuncs.com/shouye/home_icon2.png" mode="">
						</image>
						请使用微信扫一扫识别
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<button class="btn" @click="saveImage">保存本地</button>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo,
		getqrCode,
	} from '@/api/user.js';
	export default {
		data() {
			return {
				qrImg: '',
				userInfo: {phone:'***********'}
			}
		},
		onLoad() {
			this.createPoster()
		},
		methods: {
			createPoster() {
				// 获取二维码图片
				getqrCode().then(res => {
					if (res.msg) {
						this.qrImg = res.msg;
						getUserInfo().then(res => {
							this.userInfo = res.data
						})
					}
				});
			},
			// 保存图片
			saveImage() {
				let that = this
				//获取授权列表，查看是否授权写入相册权限
				uni.getSetting({
					success(res) {
						console.log(res);
						console.log(res.authSetting['scope.writePhotosAlbum']);
						if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success() {
									uni.getImageInfo({
										src: that.qrImg,
										success: function(image) {
											uni.saveImageToPhotosAlbum({
												filePath: image.path,
												success: () => {
													that.$util.Tips({
														title: '保存成功',
														icon: 'success'
													});
												},
												fail: (err) => {
													console.log(err);
													that.$util.Tips({
														title: '保存失败'
													});
												}
											});
										}
									});
								}
							})
						} else {
							uni.getImageInfo({
								src: that.qrImg,
								success: function(image) {
									uni.saveImageToPhotosAlbum({
										filePath: image.path,
										success: () => {
											that.$util.Tips({
												title: '保存成功',
												icon: 'success'
											});
										},
										fail: (err) => {
											console.log(err);
											that.$util.Tips({
												title: '保存失败'
											});
										}
									});
								}
							});

						}
					}
				})

			}
		}
	}
</script>

<style lang="scss">
	.body {
		min-height: 100vh;
		background-color: #EEF8FF;
	}
	.gap{
		padding: 204rpx 32rpx 0;
	}

	.content {
		position: relative;
		background: #FFFFFF;
		box-shadow: 0px 6px 12px 0px rgba(204, 204, 204, 0.1569);
		border-radius: 24rpx;

		.head {

			width: 208rpx;
			height: 208rpx;
			border-radius: 50%;
			background: #FFFFFF;
			position: absolute;
			top: -104rpx;
			left: 240rpx;

			.userAvatar {
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%;
			}
		}

		.vip {
			border-radius: 4rpx 4rpx 20rpx 4rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #28314C;
			padding: 2rpx 20rpx;
			background: linear-gradient(91deg, #F2F2F4 0%, #CBCED4 100%);
			margin-top: 62rpx;
			position: relative;
			z-index: 1;
		}

		.name {
			font-weight: 700;
			font-size: 32rpx;
			color: #28314C;
			margin-top: 30rpx;
		}

		.phoneIcon {
			width: 23rpx;
			height: 28rpx;
			margin-right: 6rpx;
		}

		.phoneBox {
			margin-top: 4rpx;

			.text {
				font-family: D-DIN, D-DIN;
				font-weight: 700;
				font-size: 24rpx;
				color: #637697;
			}
		}

		.codeBox {
			width: 618rpx;
			height: 618rpx;
			border: 28rpx solid #D7EEFF;
			border-radius: 22rpx;
			margin-top: 40rpx;
			padding: 10rpx;

			.qrImg {
				width: 100%;
				height: 100%;
			}
		}

		.tip {
			font-weight: 400;
			font-size: 24rpx;
			color: #637697;

			.codeIcon {
				width: 35rpx;
				height: 34rpx;
				margin: 40rpx 12rpx 40rpx 0;
			}
		}
	}

	.bottom {
		width: 100%;
		position: fixed;
		bottom: 0;
		background: #FFFFFF;
		padding: 12rpx 32rpx 50rpx;

		.btn {
			width: 100%;
			height: 86rpx;
			line-height: 86rpx;
			background: #0077FF;
			border-radius: 20rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}

	.flex-all-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.flex-column-center {
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.flex {
		display: flex;
		align-items: center;
	}
	.positionDown{
		margin-top: 112rpx;
		position: relative;
		z-index: 1;
	}
</style>